import {LeftSpaceCenter} from 'components/Center';
import React, {ReactNode} from 'react';
import Icon from './Icon';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  place-items: center;
  .icon {
    margin-bottom: 16px;
  }
`

const NoInfoError: React.FC<{text: ReactNode}> = (props) => (
  <LeftSpaceCenter fontSize="20px">
    <Wrapper>
      <Icon name="question" fontSize="48px"/>
      {props.text}
    </Wrapper>
  </LeftSpaceCenter>
);

export {NoInfoError};